<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .one,
        .two,
        .three,
        .four {
            border: 1px solid #333;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <button @click="comName='com-a'">a</button>
            <button @click="comName='com-b'">b</button>
            <button @click="comName='com-c'">c</button>
            <button @click="comName='com-d'">d</button>
        </div>
        <div class="part">
            <!-- <keep-alive >
                <component :is="comName"></component>
            </keep-alive> -->

            <!-- 组件A被缓存 -->
            <!-- <keep-alive include="com-a">
                <component :is="comName"></component>
            </keep-alive> -->
            
            <!-- 组件A B被缓存 -->
            <!-- <keep-alive :include="['com-a','com-b']">
                <component :is="comName"></component>
            </keep-alive> -->

            <keep-alive :include="/(a|b)/">
                <component :is="comName"></component>
            </keep-alive>
        </div>
    </div>
</body>
<script>
    // 所谓组件切换 => 通过对应组件名称渲染某个组件
    // 1. 模拟实现 => v-if判断 多个组件之间同时渲染一个

    // 2. 官方提供的组件 component可以对应组件名称,渲染某个组件 (可以渲染:全局组件/当前组件下注册的组件)
    //  如果给component组件的is绑定动态属性 => 可以动态选择渲染某个组件

    
    // keep-alive => 官方内置组件,<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

    // keep-alive的属性
    // include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    // exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    // max - 数字。最多可以缓存多少组件实例。
    
        
    // 1. 没有使用keep-alive之前,组件切换时: 前一个组件被销毁,当前组件初始化渲染
    // 2. 使用keep-alive以后,组件只会在使用时,初始化渲染一次, 切换组件,前一个组件不会被销毁,只是进入不活跃状态, 当前组件进入活跃状态 
    //   配合 activated 和deactivated  声明周期钩子函数(在keep-alive包裹的组件中使用)
    //   activated  => 被 keep-alive 缓存的组件激活时调用。(进入活跃状态)
    //   deactivated => 被 keep-alive 缓存的组件失活时调用。(进入不活跃状态)

    //  默认情况下,<keep-alive> 包裹动态组件时，会缓存所有不活动的组件实例

    var comA = {
        data() {
            return {
                count:1,
                timer:null,
            }
        },
        methods: {
            start(){
                clearInterval(this.timer );
                this.timer = setInterval(()=>{
                    console.log(this.count);
                    this.count ++;
                },1000)
            }
        },
        template: `<div class="one">
                <p>这是组件A:{{count}}</p>
        </div>`,
        mounted(){
            console.log("组件A挂载完毕");
        },
        activated() {
            console.log("组件A进入活跃状态");
            this.start();
        },
        deactivated() {
            console.log("组件A进入不活跃状态");
            clearInterval(this.timer);
        },
        beforeDestroy() {
            console.log("组件A准备被销毁");
            clearInterval(this.timer);
        },
        destroyed() {
            console.log("组件A已经被销毁");
        },
    }

    var comB = {
        data() {
            return {
                count:1
            }
        },
        template: `<div class="two">
            <p>这是组件B:{{count}}</p>
            <p><button @click="count++">count++</button></p>
        </div>`,
        mounted(){
            console.log("组件B挂载完毕");
        },
        activated() {
            console.log("组件B进入活跃状态");
        },
        deactivated() {
            console.log("组件B进入不活跃状态");
        },
        beforeDestroy() {
            console.log("组件B准备被销毁");
        },
        destroyed() {
            console.log("组件B已经被销毁");
        },
    }

    var comC = {
        data() {
            return {

            }
        },
        template: `<div class="three">
            <p>这是组件C</p>
        </div>`,
        mounted(){
            console.log("组件C挂载完毕");
        },
        activated() {
            console.log("组件C进入活跃状态");
            this.start();
        },
        deactivated() {
            console.log("组件C进入不活跃状态");
        },
        beforeDestroy() {
            console.log("组件C准备被销毁");
        },
        destroyed() {
            console.log("组件C已经被销毁");
        },
    }

    var comD = {
        data() {
            return {

            }
        },
        template: `<div class="four">
                <p>这是组件d</p>
            </div>`,
        mounted() {
        },
        mounted(){
            console.log("组件D挂载完毕");
        },
        activated() {
            console.log("组件D进入活跃状态");
            this.start();
        },
        deactivated() {
            console.log("组件D进入不活跃状态");
        },
        beforeDestroy() {
            console.log("组件D准备被销毁");
        },
        destroyed() {
            console.log("组件D已经被销毁");
        },
    }

    // 根实例/组件/应用
    var vm = new Vue({
        el: "#app",
        data: {
           comName:"com-a", // 默认显示组件A
        },
        components: { // 在当前组件(根组件) 注册了两个子组件 (comA comB)
            // 键名 => 组件名
            // 键值 => 组件的配置对象 
            comA: comA,
            comB: comB,
            comC: comC,
            comD: comD,
        }
    })



</script>

</html>